{extend name="common/common" /}

{block name="style"}
<link href="__CSS__/bootstrap.min.css?v=3.3.6" rel="stylesheet">
<style media="screen">
.tips{
	border:1px solid #E6A23C;
	color:#E6A23C;
	font-size: 16px;
	box-shadow: #E6A23C 0px 2px 12px 0px;
	font-family: "宋体";
	margin-bottom: 25px;
}
.table.table-bordered.table-striped tr td {
	line-height: 26px;
}
.ibox-title h5{
	float:none;
	font-weight: 999;
}
.span-danger{
	font-family: "宋体";
	font-weight: 999;
}
.el-radio-button--mini .el-radio-button__inner {
	padding: 7px 10px;
}
.table-public-service-system{
	min-width: 1550px;
}
.el-textarea__inner {
	line-height: 0.7;
}
label{
	margin-bottom: 0;
}
.el-dialog__body input[type="file"]{
	display: none;
}
</style>
{/block}

{block name="component"}
{/block}

{block name="content"}
<div class="ibox-title">
    <h5>
		<span class="span-primary">{{form.departName}}</span>
		电商进农村综合示范项目资金使用情况统计表
	</h5>
</div>
<div class="ibox-content">
	<el-form :model="form" :rules="rules" ref="form" label-width="110px" inline>
		<el-form-item label="填表人" prop="linkMan">
			<el-input size="mini" v-model="form.linkMan"></el-input>
		</el-form-item>
		<el-form-item label="电话" prop="linkType">
			<el-input size="mini" v-model="form.linkType"></el-input>
		</el-form-item>
		<el-form-item label="承办企业名称" prop="enterName">
			<el-input size="mini" v-model="form.enterName" @change="checkEnterName"></el-input>
		</el-form-item><br>
		<table class="table table-bordered table-striped text-center">
			<tr>
				<th class="text-center">序号</th>
				<th class="text-center">项目类型</th>
				<th class="text-center">项目名称</th>
				<th class="text-center">已拨付金额（万元）</th>
				<th class="text-center">未拨付金额（万元）</th>
				<th class="text-center">资金占比（%）（自动计算）</th>
				<th class="text-center">操作</th>
			</tr>
			<tr v-for="(dataItem, index) in form.fundAppropriateData">
				<td>{{index + 1}}</td>
				<td>
					<el-select v-model="dataItem.projectType" size="mini"
					placeholder="请选择">
						<el-option label="公共服务体系" value="1"></el-option>
						<el-option label="物流配送体系" value="2"></el-option>
						<el-option label="农村产品上行" value="3"></el-option>
						<el-option label="农村电商培训" value="4"></el-option>
					</el-select>
				</td>
				<td>
					<el-input size="mini" v-model="dataItem.projectName"></el-input>
				</td>
				<td>
					<el-input size="mini" type="number" min="0"
					 v-model="dataItem.allocatedMoney"></el-input>
				</td>
				<td>
					<el-input size="mini" type="number" min="0"
					 v-model="dataItem.unAllocatedMoney"></el-input>
				</td>
				<td>
					<el-input size="mini" readonly v-model="dataItem.moneyRatio"></el-input>
				</td>
				<td>
					<el-button type="danger" icon="el-icon-delete"
						size="mini" circle plain
						@click="delRow(index,dataItem)">
					</el-button>
				</td>
			</tr>
			<tr>
				<td colspan="7">
					<el-button type="info" size="mini" @click="addRow">
						添加
					</el-button>
				</td>
			</tr>
		</table>
		<p class="text-center">
			<el-button type="danger" plain @click="reset">重置表格</el-button>
			<el-button type="primary" plain @click="save">保存表格</el-button>
			<el-button type="success" plain @click="subTable">提交表格</el-button>
		</p>
		<el-card shadow="hover" class="tips">
			<div class="text item">
				提示：
			</div>
			<div class="text item">
				1.本表所填写资金范围为“国家电子商务进农村综合示范项目”实际到账中央财政资金。
			</div>
			<div class="text item">
				2.“项目类型”按照“公共服务体系、物流配送体系、农村产品上行、农村电商培训”4个类型进行选择。
			</div>
			<div class="text item">
				3.“项目名称”按照示范县与承办单位签订合同填写。
			</div>
			<div class="text item">
				4.一个承办单位所承担的所有项目填写在一张表上。
			</div>
			<div class="text item">
				5.填写另一个承办单位项目情况时，点击提交当前表格后，在“提交成功”页面右上方点击“继续添加企业”继续填写，或者重新点击菜单栏“上报”中的“资金管理”填写。
			</div>
			<div class="text item">
				6.更新修改某企业资金拨付情况时，在原填写表上修改更新。在“报表查询”中“资金管理”中“资金使用企业列表”中找到该企业表格，点击“修改”按钮，即可更新，修改后再点击“提交”按钮。
			</div>
		</el-card>
	</el-form>
</div>
{/block}

{block name="script"}
<script type="text/javascript">
var main = new Vue({
	el:"#main",
	data:{
		loading:false,
		moneyLimit:"{$moneyLimit}",
		form_check_enter_name:false,
		form:{
			departId:"{$depart.id}",
			departName:"{$depart.name}",
			linkMan:"",
			linkType:"",
			enterName:"",
			fundAppropriateData:[{
				projectType:"",projectName:"",allocatedMoney:"",unAllocatedMoney:"",moneyRatio:""
			}]
		},
		form_reset:{
			departId:"{$depart.id}",
			departName:"{$depart.name}",
			linkMan:"",
			linkType:"",
			enterName:"",
			fundAppropriateData:[{
				projectType:"",projectName:"",allocatedMoney:"",unAllocatedMoney:"",moneyRatio:""
			}]
		},
		rules:{
			linkMan:[{required:true,message:'填表人不能为空',trigger:['blur','change']}],
			linkType:[{required:true,message:'联系方式不能为空',trigger:['blur','change']}],
			enterName:[{required:true,message:'企业名称不能为空',trigger:['blur','change']}],
		}
	},
	watch:{
		form:{
			handler(newValue, oldValue) {
				this.autoCompute();
				this.checkForm();
			},deep: true
		}
	},
	methods:{
		delRow(index) {
			this.$confirm('除填写错误外，禁止删除！确定还要删除数据吗？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				if (index !== 0) {
					this.form.fundAppropriateData.splice(index, 1)
				}else{
					this.$alert('第一行不能删除哦', '错误',{
						type:"error",showClose:false
					})
				}
			}).catch(() => {});
		},
		addRow() {
			this.form.fundAppropriateData.push({
				projectType:"",projectName:"",allocatedMoney:"",unAllocatedMoney:"",moneyRatio:""
			});
		},
		reset() {
			this.$confirm('确定要重置吗？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.form.fundAppropriateData = this.form_reset.fundAppropriateData;
			}).catch(() => {});
		},
		AjaxResponse(res) {
			if(res.code == 1){
				main.$notify({title:"错误",type:"success",message:res.msg})
			}else{
				main.$notify.error({title:"错误",message:res.msg})
			}
		},
		save() {
			if(this.form_check_enter_name){
				var param = this.form;
				$.post("./saveCapital",param,function(res){
					main.AjaxResponse(res);
				});
			}else{
				this.$notify.error({
					title:"错误",
					message:"请检查承办企业名称，企业名称不能为空或该企业报表已存在"
				})
			}
		},
		checkEnterName() {
			var param = {
				departId:this.form.departId,
				departName:this.form.departName,
				enterName:this.form.enterName
			}
			$.post("./checkCapital",param,function(res){
				if(res.code == 1){
					main.form_check_enter_name = true;
				}else{
					main.$notify.error({
						title:"错误",
						message:res.msg
					});
					main.form.enterName = "";
				}
			});
		},
		autoCompute() {
			var c = this.moneyLimit;
			for(var i=0;i<this.form.fundAppropriateData.length;i++){
				if(this.form.fundAppropriateData[i].allocatedMoney != ''){
					var a = Number(this.form.fundAppropriateData[i].allocatedMoney);
				}else{
					var a = 0;
				}
				if(this.form.fundAppropriateData[i].unAllocatedMoney != ''){
					var b = Number(this.form.fundAppropriateData[i].unAllocatedMoney);
				}else{
					var b = 0;
				}
				this.form.fundAppropriateData[i].moneyRatio = ((a + b)/c*100).toFixed(2);
			}
		},
		checkForm() {
			for(var i=0;i<this.form.fundAppropriateData.length;i++){
				if(this.form.fundAppropriateData[i].allocatedMoney != ''){
					var a = Number(this.form.fundAppropriateData[i].allocatedMoney);
				}else{
					var a = 0;
				}
				if(this.form.fundAppropriateData[i].unAllocatedMoney != ''){
					var b = Number(this.form.fundAppropriateData[i].unAllocatedMoney);
				}else{
					var b = 0;
				}
				if(a+b > this.moneyLimit){
					this.$notify.error({
						title:"错误",
						message:"资金占比超过100%，请核对已拨付金额和未拨付金额。"
					});
					this.form.fundAppropriateData[i].allocatedMoney = "";
					this.form.fundAppropriateData[i].unAllocatedMoney = "";
				}
			}
		},
		subTable() {
			if(this.form_check_enter_name){
				var param = this.form;
				$.post("./saveCapital",param,function(res){
					if(res.code == 1){
						$.post("{:url('Commit/CommitCapital')}",param,function(response){
							main.AjaxResponse(response);
						})
					}
				});
			}else{
				this.$notify.error({
					title:"错误",
					message:"请检查承办企业名称，企业名称不能为空或该企业报表已存在"
				})
			}
		}
	}
})
</script>
{/block}
